<template>
  <div class="contain-body abfa-box">
    <Title></Title>
    <div class="search-contain-body">
      <el-form ref="form" inline :model="form" label-width="75px">
		<el-form-item>
		  <div class="d-ib font-table" slot="label" style="margin-left: -14%;">违禁品类型：</div>
		  <el-select v-model="form.wjplxdms" placeholder="请选择违禁品类型">
			<el-option label="" value="">--请选择违禁品类型--</el-option>
		    <el-option label="1" value="1"></el-option>
		    <el-option label="2" value="2"></el-option>
		  </el-select>
		</el-form-item>
        <el-form-item>
          <el-button icon="el-icon-search" class="button-search" @click="onSubmit">搜索</el-button>
		  <!-- <el-button icon="el-icon-toilet-paper" class="button-search" @click="doclear">清空</el-button> -->
        </el-form-item>
      </el-form>

    </div>
    <div>
      <div class="pos-r">
        <Title msg="信息列表"></Title>
        <div class="pos-a" style="right: 0">
          <el-button @click="openOptions('add')" type="primary" icon="el-icon-plus">
            新增
          </el-button>
        </div>
      </div>
      <CustomTable
          :columns="columns"
		  :total="total"
          :table-data="tableData"
		  :pagination="pagination"
		  @pagination="paginationChange">
        <div slot="options" slot-scope="scope">
          <el-button @click="openOptions('details',scope.data)" style="margin-left: 4px;" class="button-blur">详情</el-button>
          <el-button @click="openOptions('update',scope.data)" style="margin-left: 4px;" class="button-green">编辑</el-button>
          <el-button @click="deleteDate(scope.data.id)" style="margin-left: 4px;" class="button-red">删除</el-button>
        </div>
      </CustomTable>
    </div>

    <el-dialog
        width="819px"
        center
        :class="['custom-dialog-fill','font-table']" title=""
        :visible.sync="dialog.open"
		:close-on-click-modal="false">

      <div class="dialog-title" slot="title">
        {{ dialog.title }}
      </div>

      <div class="d-f jc-c">

        <el-form class="font-table " style="color: #000000;" ref="form" :model="form" label-width="75px" v-if="dialog.type!='details'">
          <div class="d-f jc-c form-security">
			  <el-form-item>
			  <div class="d-ib font-table" slot="label">线路编码：</div>
				<el-input v-model="form.dtxlbm"></el-input>
			  </el-form-item>
			  <el-form-item>
				<div class="d-ib font-table" slot="label">站点编码：</div>
				<el-input v-model="form.dtzdbm"></el-input>
			  </el-form-item>
          </div>
		  <div class="d-f jc-c form-security">
			  <el-form-item>
			  <div class="d-ib font-table" slot="label" style="margin-left: -15%;">违禁品类型：</div>
				<el-select v-model="form.wjplxdm" placeholder="请选择违禁品类型">
					<el-option label="1" value="1"></el-option>
					<el-option label="2" value="2"></el-option>
				</el-select>
			  </el-form-item>
			  <el-form-item>
				<div class="d-ib font-table" slot="label">存储路径：</div>
				<el-input v-model="form.cclj"></el-input>
			  </el-form-item>
		  </div>
		  <el-form-item>
		    <div class="d-ib font-table" slot="label">照片：</div>
			<el-upload
			        class="upload-demo"
			        :action="upload()"
			        :data="{id:form.id}"
			        :on-preview="handlePreview"
			        :on-remove="handleRemove" 
			        :on-success="handSuccess"
			        :before-upload="beforeAvatarUpload"
			        :file-list="fileList"
			        :limit=1
					:on-exceed="masterFileMax"
			        list-type="picture">
			  <el-button size="small" type="primary" v-show="flagupdate">点击上传</el-button>
			  <div slot="tip" class="el-upload__tip" v-show="flagupdate" style="color: red;">只能上传jpg/png文件，且不超过4M!</div>
			</el-upload>
		  </el-form-item>
        </el-form>
        
        <el-form class="font-table " style="color: #000000;" ref="form" :model="form" label-width="75px" v-if="dialog.type=='details'">
          <div class="d-f jc-c form-security">
			  <el-form-item>
			  <div class="d-ib font-table" slot="label">线路编码：</div>
				<el-input v-model="form.dtxlbm" readonly></el-input>
			  </el-form-item>
			  <el-form-item>
				<div class="d-ib font-table" slot="label">站点编码：</div>
				<el-input v-model="form.dtzdbm" readonly></el-input>
			  </el-form-item>
          </div>
          <div class="d-f jc-c form-security">
			  <el-form-item>
				<div class="d-ib font-table" slot="label" style="margin-left: -15%;">违禁品类型：</div>
				<el-input v-model="form.wjplxdm" readonly></el-input>
			  </el-form-item>
			  <el-form-item>
				<div class="d-ib font-table" slot="label">存储路径：</div>
				<el-input v-model="form.cclj" readonly></el-input>
			  </el-form-item>
          </div>
		  <div class="d-f jc-c form-security">
			  <el-form-item>
				<div class="d-ib font-table" slot="label" >图片格式：</div>
				<el-input v-model="form.tpgs" readonly></el-input>
			  </el-form-item>
			  <el-form-item>
				<div class="d-ib font-table" slot="label">图片大小：</div>
				<el-input v-model="form.tpdx" readonly></el-input>
			  </el-form-item>
		  </div>
		  <el-form-item>
		    <div class="d-ib font-table" style="margin-left: -9%">照片：</div>
		    <el-upload
		            class="upload-demo"
		            :file-list="fileList"
		            list-type="picture">
		    </el-upload>
		  </el-form-item>
        </el-form>
      </div>
      <div class="d-f jc-c">
        <div v-if="dialog.type=='details'">
          <el-button
              class="button-cancel"
              @click="dialog.open = false">确 定
          </el-button>
        </div>
        <div v-if="dialog.type=='add'">
          <el-button
              class="button-cancel"
              @click="dialog.open = false">取 消
          </el-button>
          <el-button
              class="button-submit mr58"
              @click="addXgantp">确 定
          </el-button>
        </div>
        <div v-if="dialog.type=='update'">
          <el-button
              class="button-cancel"
              @click="dialog.open = false">取 消
          </el-button>
          <el-button
              class="button-submit mr58"
              @click="updateXgantp">确 定
          </el-button>
        </div>
      </div>

    </el-dialog>

  </div>
</template>

<script>
import Title from "../../components/Title";
import CustomTable from "../../components/CustomTable";
import dxhdUrl from "../../config/config";

export default {
  name: "Abfa",
  components: {Title, CustomTable,dxhdUrl},
  data() {
    return {
      flagupdate:true,
	  fileList: [],	
	  total: 0,
	  pagination: {},
      dialog: {
        title: 's',
        open: false,
        type: 'details',//'edit','add','details'
      },
      form: {
        name: '',
        schemeName: '',
        activityName: '',
        region: '',
        date: '',
        bigEvent: '',
        shape: '',
        approval: '',
        desc: '',
        remark: ''
      },
      tableData: [
        
      ],
      params: {
        current: 1,
        size: 10,

      },
      columns: [
        {
          key: 'dtxlmc',
          label: '线路名称'
        },
		{
		  key: 'dtxlbm',
		  label: '线路编码'
		},
        {
          key: 'dtzdmc',
          label: '站点名称'
        },
		{
		  key: 'dtzdbm',
		  label: '站点编码'
		},
		{
		  key: 'wjplxdm',
		  label: '违禁品类型'
		},
		{
		  key: 'xzqhdm',
		  label: '行政区划'
		},
        {
          key: 'options',
          label: '操作',
          width: '243px',
          slot: true
        }
      ],
    }
  },
  mounted() {
  },
  methods: {
	upload(){
		return dxhdUrl.dxhdUrl+'/train-xgajtp/update';
	},
    onSubmit() {
      this.getList(this.pagination.pageNum, this.pagination.pageSize);
    },
	doclear(){
		this.form.wjplxdms = "";
	},
	handSuccess(response, file, fileList){
	    this.form.id=response.data;
	},
	beforeAvatarUpload(file) {
	    const isJPG = file.type === 'image/jpeg';
		const isPNG = file.type === 'image/png';
	    const isLt4M = file.size / 1024 / 1024 < 4;
		this.form.tpgs = file.type.substr(6);
		this.form.tpdx = parseFloat(file.size / 1024 / 1024).toFixed(2);
	    if (!isJPG && !isPNG) {
	        this.$message.error('上传头像图片只能是JPG或者PNG 格式!');
	    }
	    if (!isLt4M) {
	        this.$message.error('上传头像图片大小不能超过 4MB!');
	    }
	    return (isJPG || isPNG)  && isLt4M;
	},
	handleRemove(file, fileList) {
		const isType = file.name.split('.')[1];
	    if(isType == "png" || isType == "jpg"){
			this.remove();
	    }
	    
	},
	masterFileMax(files, fileList) {
		this.$message.warning('请最多上传1个文件。');
	},
	handlePreview(file) {
	},
    openOptions(params,data) {
		this.dialog.type = params
        if (params == 'add') {
			this.dialog.title = '新增X光安检信息';
      		this.form = {};
			this.fileList=[];
        }
        if (params == 'details') {
			this.dialog.title = 'X光安检信息详情';
      		this.form = data;
			if(data.tpdz==null || data.tpdz==""){
			    this.fileList=[];
			}else{
			    this.fileList=[{}];
			    this.fileList[0].url=data.tpdz;
			}
        }
		if (params == 'update') {
			this.dialog.title = 'X光安检信息编辑';
      		this.form = data;
			if(data.tpdz==null || data.tpdz==""){
			    this.fileList=[]; 
			}else{
			    this.fileList=[{}];
			    this.fileList[0].url=data.tpdz;
			}
		}
		this.dialog.open = true
    },
	paginationChange (e) {
	  this.pagination = e;
	  this.getList(this.pagination.pageNum, this.pagination.pageSize);
	},
    getList (page, limit) {
      this.axios.post('/train-xgajtp/selectPage', { 
        current: page,
        size: limit,
        entity: {
          wjplxdm: this.form.wjplxdms || ''
        }
      }).then((res) => {
        this.tableData = res.data.records;
        this.total = res.data.total;
      }).catch((error) => {
		  this.$message({
		      message: '数据查询失败！'+error,
			  type: 'error',
		  });
      });
    },
	addXgantp(){
		var id =this.form.id;
		var url ='/train-xgajtp/save';
		if(id!=null && id!=''){
		    url= '/train-xgajtp/updateById';
		}
		this.axios.post(url, this.form,).then((res) => {
		  if(res.code == "1"){
			  this.$message({
				  message: '数据保存成功！',
				  type: 'success',
				  offset:300
			  });
		  }
		  this.dialog.open = false;
		  this.getList(1,10);
		}).catch((error) => {
		  this.$message({
			  message: '数据保存失败！'+error,
			  type: 'error',
		  });
		}); 
	},
	updateXgantp(){
		var clcfsj = this.form.clcfsj || '';
		
		if("" != clcfsj && "string" != typeof(clcfsj)){
		    this.form.clcfsj = this.formateDate(clcfsj,'yyyy-MM-dd hh:mm:ss');
		}
		this.axios.post('/train-xgajtp/updateById', this.form,).then((res) => {
		  if(res.code == "1"){
			  this.$message({
				  message: '数据保存成功！',
				  type: 'success',
				  offset:300
			  });
		  }
		  this.dialog.open = false;
		  this.getList(1,10);
		}).catch((error) => {
		  this.$message({
			  message: '数据保存失败！'+error,
			  type: 'error',
		  });
		});
	},
    deleteDate(id) {
      this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '关闭',
        type: ''
      }).then(() => {
		this.delete(id);
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
	  
    },
	
	delete(id){
		var params = new URLSearchParams();
		params.append('Id', id);   
		this.axios.post('/train-xgajtp/removeById', params,
		).then((res) => {
		  if(res.code == "1"){
			  this.$message({
				  message: '数据删除成功！',
				  type: 'success',
				  offset:300
			  });
			  this.getList(1,10);
		  }
		}).catch((error) => {
		  this.$message({
			  message: '数据删除失败！'+error,
			  type: 'error',
		  });
		});
	},
	remove(){
	    this.axios.post('/train-xgajtp/handleRemove', {
	        id:this.form.id
	    }).then((res) => {
	        this.$message({
				type: 'success',
				message: '删除成功!'
			});
		}).catch((error) => {
				this.$message({
				type: 'error',
				message: '删除失败'
			});
		});
	}
  }
}
</script>

<style lang="scss">
.abfa-box {
  .mb-14 {
    margin-bottom: 14px;
  }

  .mr111 {
    margin-right: 111px;
  }

  .mr58 {
    margin-right: 58px;
  }

}


.abfa-add {
  color: #436AA3;
  line-height: 17px;

  span {
    display: inline-block;
  }
}

.add-attachment {
  background-image: url("../../assets/imgs/add_attachment.svg");
  background-size: 17px 17px;
  background-position: 0 1px;
  background-repeat: no-repeat;
  width: 17px;
  height: 17px;
  display: inline-block;
}

.add_photos {
  background-image: url("../../assets/imgs/add_photos.svg");
  background-size: 17px 17px;
  background-position: 0 1px;
  background-repeat: no-repeat;
  width: 17px;
  height: 17px;
  display: inline-block;
}

.scheme-preview {
  .el-input-group {
    width: 430px;
  }

  .button-submit {
    padding: 6px 22px;
  }
}

.custom-dialog-fill {
  .form-security {
    .el-form-item__content {
      width: 205px !important;
    }
  }

}
.form-security {
  img {
	width: 122px;
	height: 140px;
	background-size: cover;
	background-image: url(../../assets/imgs/revie_picture.png);
  }
}
</style>

